<template>
  <el-container>
    <el-header height="163px"
      ><el-row>
        <el-col :span="1"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="3"
          ><img
            src="../assets/img/logo.png"
            style="margin-top: 20px; width: 120px"
        /></el-col>
        <el-col :span="17"
          ><div class="grid-content bg-purple" style="margin-top: 40px">
            <el-row>
              <el-col :span="6"
                ><span
                  style="
                    font-weight: bolder;
                    font-size: 30px;
                    margin-left: 10px;
                    text-shadow: 3px 3px 3px #cdc0b0;
                  "
                  >MetaPheView </span
                ><span
                  style="
                    font-weight: bolder;
                    font-size: 30px;
                    color: #ee2c2c;
                    text-shadow: 3px 3px 3px #f08080;
                  "
                  >V1.0</span
                ></el-col
              >
              <el-col :span="18"
                ><span
                  style="
                    font-weight: normal;
                    font-size: 30px;
                    font-family: Tahoma;
                  "
                >
                  - more flexible & visual metabolic phenotype view
                  software</span
                ></el-col
              ></el-row
            >
          </div></el-col
        >
        <el-col :span="3">
          <div v-if="this.$auth.$storage.getLocalStorage('username')">
            {{ this.$auth.$storage.getLocalStorage("username") }}
          </div>
          <nuxt-link
            :to="`/login`"
            v-if="!this.$auth.$storage.getLocalStorage('username')"
          >
            <el-button type="primary" style="margin-top: 50px"
              >登录</el-button
            ></nuxt-link
          >
          <el-button
            v-if="this.$auth.$storage.getLocalStorage('username')"
            type="danger"
            @click="logout"
            >登出</el-button
          >
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="400px" style="background-color: #e0eeee; padding: 20px">
        <div
          style="
            border-width: 5px;
            border-style: ridge;
            border-color: #6495ed;
            border-radius: 10px;
          "
        >
          <el-menu
            :default-openeds="[]"
            class="el-menu-vertical-demo"
            unique-opened="true"
            @open="handleOpen"
            @close="handleClose"
            background-color="#fff"
            text-color="#000000"
            active-text-color="#2626f7"
            style="outline: none; text-align: left"
          >
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-s-data"></i>分析差异代谢物</template
              >
              <el-menu-item-group>
                <template slot="title">分析前需要先上传文件</template>
                <el-submenu index="1-1">
                  <template slot="title"
                    ><i class="el-icon-upload"></i>上传分析文件</template
                  >
                  <nuxt-link :to="`/metabo/differential_analysis/upload_file`">
                    <el-menu-item index="1-1-1"><i class="el-icon-caret-right"></i>上传分析文件</el-menu-item>
                  </nuxt-link>
                </el-submenu>
              </el-menu-item-group>
              <el-menu-item-group>
                <template slot="title">选择方法进行数据分析</template>
                <el-submenu index="1-2">
                  <template slot="title"
                    ><i class="el-icon-menu"></i>选择分析方法</template
                  >
                  <el-submenu index="1-2-1">
                    <template slot="title"
                      ><i class="el-icon-arrow-right"></i>PCA</template
                    >
                    <el-menu-item-group>
                      <nuxt-link
                        :to="`/metabo/differential_analysis/pca/score`"
                      >
                        <el-menu-item index="1-2-1-1"><i class="el-icon-caret-right"></i>Score</el-menu-item>
                      </nuxt-link>
                      <nuxt-link
                        :to="`/metabo/differential_analysis/pca/scree`"
                      >
                        <el-menu-item index="1-2-1-2"><i class="el-icon-caret-right"></i>Scree</el-menu-item>
                      </nuxt-link>
                      <nuxt-link :to="`/metabo/differential_analysis/pca/cv`">
                        <el-menu-item index="1-2-1-3"><i class="el-icon-caret-right"></i>Cv</el-menu-item>
                      </nuxt-link>
                      <nuxt-link
                        :to="`/metabo/differential_analysis/pca/dmodex`"
                      >
                        <el-menu-item index="1-2-1-4"><i class="el-icon-caret-right"></i>Dmodex</el-menu-item>
                      </nuxt-link>
                      <nuxt-link
                        :to="`/metabo/differential_analysis/pca/outlier`"
                      >
                        <el-menu-item index="1-2-1-5"
                          ><i class="el-icon-caret-right"></i>Outlier Detect</el-menu-item
                        >
                      </nuxt-link>
                    </el-menu-item-group>
                  </el-submenu>
                  <el-submenu index="1-2-2">
                    <template slot="title"
                      ><i class="el-icon-arrow-right"></i>PLSDA</template
                    >
                    <el-menu-item-group>
                      <nuxt-link
                        :to="`/metabo/differential_analysis/plsda/score`"
                      >
                        <el-menu-item index="1-2-2-1"><i class="el-icon-caret-right"></i>Score</el-menu-item>
                      </nuxt-link>
                      <nuxt-link
                        :to="`/metabo/differential_analysis/plsda/scree`"
                      >
                        <el-menu-item index="1-2-2-2"><i class="el-icon-caret-right"></i>Scree</el-menu-item>
                      </nuxt-link>
                      <nuxt-link :to="`/metabo/differential_analysis/plsda/cv`">
                        <el-menu-item index="1-2-2-3"><i class="el-icon-caret-right"></i>Cv</el-menu-item>
                      </nuxt-link>
                      <nuxt-link
                        :to="`/metabo/differential_analysis/plsda/outlier`"
                      >
                        <el-menu-item index="1-2-2-4"
                          ><i class="el-icon-caret-right"></i>Outlier Detect</el-menu-item
                        >
                      </nuxt-link>
                      <nuxt-link
                        :to="`/metabo/differential_analysis/plsda/permutation_test`"
                      >
                        <el-menu-item index="1-2-2-5"
                          ><i class="el-icon-caret-right"></i>Permutation Test</el-menu-item
                        >
                      </nuxt-link>
                      <nuxt-link
                        :to="`/metabo/differential_analysis/plsda/orthogonal_score`"
                      >
                        <el-menu-item index="1-2-2-6"
                          ><i class="el-icon-caret-right"></i>Orthogonal Score</el-menu-item
                        >
                      </nuxt-link>
                      <nuxt-link
                        :to="`/metabo/differential_analysis/plsda/plsr_score`"
                      >
                        <el-menu-item index="1-2-2-7"><i class="el-icon-caret-right"></i>Plsr Score</el-menu-item>
                      </nuxt-link>
                    </el-menu-item-group>
                  </el-submenu>

                  <el-submenu index="1-2-3">
                    <template slot="title"
                      ><i class="el-icon-arrow-right"></i>Univariate
                      Analysis</template
                    >
                    <el-menu-item-group>
                      <nuxt-link
                        :to="`/metabo/result_analysis/ua/linear_regression`"
                      >
                        <el-menu-item index="1-2-3-1"
                          ><i class="el-icon-caret-right"></i>Linear Regression</el-menu-item
                        >
                      </nuxt-link>
                      <nuxt-link
                        :to="`/metabo/result_analysis/ua/linear_regression_with_adjustment`"
                      >
                        <el-menu-item index="1-2-3-2"
                          ><i class="el-icon-caret-right"></i>LR With Adjustment</el-menu-item
                        >
                      </nuxt-link>
                      <nuxt-link
                        :to="`/metabo/result_analysis/ua/bootstrapping`"
                      >
                        <el-menu-item index="1-2-3-3"
                          ><i class="el-icon-caret-right"></i>Bootstrapping</el-menu-item
                        >
                      </nuxt-link>
                    </el-menu-item-group>
                  </el-submenu>
                  <el-submenu index="1-2-4">
                    <template slot="title"
                      ><i class="el-icon-arrow-right"></i>Power
                      Analysis</template
                    >
                    <el-menu-item-group>
                      <!-- 有致命bug -->
                      <!-- <nuxt-link :to="`/metabo/result_analysis/pa/metric_curve`">
                <el-menu-item index="5-1">Metric Curve</el-menu-item>
              </nuxt-link> -->
                      <nuxt-link
                        :to="`/metabo/result_analysis/pa/metric_spectrum`"
                      >
                        <el-menu-item index="1-2-4-2"
                          ><i class="el-icon-caret-right"></i>Metric Spectrum</el-menu-item
                        >
                      </nuxt-link>
                      <nuxt-link :to="`/metabo/result_analysis/pa/heatmap`">
                        <el-menu-item index="1-2-4-3"><i class="el-icon-caret-right"></i>Heatmap</el-menu-item>
                      </nuxt-link>
                      <nuxt-link
                        :to="`/metabo/result_analysis/pa/heatmap_signal`"
                      >
                        <el-menu-item index="1-2-4-4"
                          ><i class="el-icon-caret-right"></i>Heatmap Signal</el-menu-item
                        >
                      </nuxt-link>
                    </el-menu-item-group>
                  </el-submenu>
                </el-submenu>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title"
                ><i class="el-icon-s-data"></i>寻找代谢物通路</template
              >
              <el-menu-item-group>
                <nuxt-link :to="`/fp/steinter_tree`">
                  <el-menu-item index="2-1"
                    ><i class="el-icon-caret-right"></i>Steiner Tree - based pathway enrichment</el-menu-item
                  >
                </nuxt-link>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </div>
      </el-aside>
      <el-container>
        <el-main><nuxt /></el-main>
      </el-container>
    </el-container>
    <el-footer></el-footer>
  </el-container>
</template>

<script>
import user from "@/api/user";
export default {
  data() {
    return {
      state: false,
    };
  },
  created() {
    this.getPasserbyUser();
  },
  methods: {
    getPasserbyUser() {
      user.passerbyLogin().then((res) => {});
    },
    logout() {
      this.$auth.$storage.removeLocalStorage("username");
    },
  },
};
</script>

<style>
.el-header {
  background-color: #ededed;
  color: #333;
  line-height: 60px;
  height: 96px;
  text-align: left;
  border-bottom: solid rgb(10, 10, 10) 1px;
}

.el-footer {
  background-color: #dedede;
  color: #333;
  line-height: 60px;
  height: 96px;
  text-align: left;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 200px;
  height: 1000px;
  border-right-style: dashed;
  border-width: 1px;
}
.el-main {
  background-color: #ffffff;
  color: #333;
}
a {
  color: #333;
  font-weight: Normal; /*CSS字体效果 普通 可以改成bold粗体 如果去除此行那么默认是不显示下划线的*/
  text-decoration: none; /*CSS下划线效果：无下划线*/
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
.bg-purple {
  background: #ededed;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>